<template>
    <!-- 管理中心/指标设置 -->
    <div class="indexSetting">
        <div class="top_operation">

            <div class="every_operation" v-if="isRegionShow">
                <span><b style="color:red;">*</b> 大区：</span>
                <a-select
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="regionChange" 
                    v-model="regionId" 
                >
                    <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isCityShow">
                <span><b style="color:red;">*</b> 城市：</span>
                <a-select 
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="cityChange" 
                    v-model="cityId"
                >
                    <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isWareShow">
                <span><b style="color:red;">*</b> 仓库：</span>
                <a-select
                    show-search
                    :filter-option="filterOption" 
                    style="width: 195px" 
                    @change="warehouseChange" 
                    v-model="organizeId"
                >
                    <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>

            <div class="every_operation">
                <span>创建人：</span>
                <a-input placeholder="请输入" v-model="createBy" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation">
                <span>创建时间：</span>
                <a-range-picker
                    v-model="createTime"
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['Start Time', 'End Time']"
                    @change="createChange"
                    @ok="createOk"
                    style="width:195px;"
                />
            </div>
            <div class="every_operation">
                <span>修改人：</span>
                <a-input placeholder="请输入" v-model="updateBy" style="width:195px;" allowClear/>
            </div>
            <div class="every_operation">
                <span>修改时间：</span>
                <a-range-picker
                    v-model="updateTime"
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['Start Time', 'End Time']"
                    @change="editChange"
                    @ok="editOk"
                    style="width:195px;"
                />
            </div>

            <div class="button_div">
                <a-button type="primary" icon="search" @click="onSearch">搜索</a-button>
                <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset">重置</a-button>
            </div>
        </div>
        <div class="select_number">
            <span class="number_span">已选择<b>{{selectNumber}}</b>项</span>
            <span class="clear_span" @click="clearSelect">清空</span>
        </div>
        <div class="add_btn">
            <a-button type="primary" icon="plus" @click="showDrawer">新增</a-button>
            <a-button style="margin-left:20px;" v-if="deletdBtnShow" @click="batchDelete()">批量删除</a-button>
            <!-- 右滑抽屉 -->
            <a-drawer
                :title="drawerTitle"
                :placement="placement"
                :closable="false"
                :visible="visible"
                @close="onClose"
                width="500"
            >
                <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    labelAlign="left"
                >
                    <a-form-model-item ref="targName" label="指标名称" prop="targName">
                        <a-input
                            v-model="form.targName"
                            placeholder="请输入"
                            @blur="() => {$refs.targName.onFieldBlur()}"
                        />
                    </a-form-model-item>

                    <a-form-model-item label="大区" prop="region" v-if="isFormRegionShow">
                        <a-select
                            show-search
                            :filter-option="filterOption"
                            style="width: 100%" 
                            @change="regionFormChange" 
                            v-model="form.region" 
                            :disabled="disabled"
                        >
                            <a-select-option :key="index" v-for="(item, index) in form.regionList" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="城市" prop="city" v-if="isFormCityShow">
                        <a-select 
                            show-search
                            :filter-option="filterOption"
                            style="width: 100%" 
                            @change="cityFormChange" 
                            v-model="form.city"
                            :disabled="disabled"
                        >
                            <a-select-option :key="index" v-for="(item, index) in form.cityList" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="仓库" prop="name" v-if="isFormWareShow">
                        <a-select
                            show-search
                            :filter-option="filterOption" 
                            style="width: 100%" 
                            @change="warehouseFormChange" 
                            v-model="form.name"
                            :disabled="disabled"
                        >
                            <a-select-option :key="index" v-for="(item, index) in form.warehouseList" :value="item.id">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>

                    <a-form-model-item ref="dsFieldName" label="考核数据源" prop="dsFieldName">
                        <a-input
                            style="width: 185px;margin-right:10px;"
                            v-model="form.dsFieldName"
                            disabled
                        />
                        <a-button type="primary" @click="choiceData()">选择数据源</a-button>
                    </a-form-model-item>
                    <!-- 选择数据源对话框 -->
                    <a-modal 
                        v-model="dataVisible" 
                        width="820px" 
                        title="选择数据" 
                        @ok="dataHandleOk"
                        :ok-button-props="{ props: { disabled: btnDisabled } }"
                        >
                        <div class="choice_data_div" style="height:320px;display:flex;">
                            <div style="width:260px;border-right:1px solid #e8eaed;">
                                <p>数据列表</p>
                                <a-input-search placeholder="搜索业务包和表" style="width: 200px" @search="businessSearch" @change="businessChange" size="small" v-model="searchValue" allowClear/>
                                <div style="width:240px;height:260px;overflow:auto;">
                                    <a-directory-tree
                                        @select="onSelect" 
                                        @expand="onExpand"
                                        style="margin-top:10px;"
                                        :treeData="dsData"
                                        :replaceFields="dataReplaceFields"
                                        :selectedKeys="selectedKeys"
                                        :expandedKeys="expandedKeys"
                                    >
                                    </a-directory-tree>
                                </div>
                            </div>
                            <div style="flex:1;position:relative;">
                                <div 
                                    style="width:160px;height:160px;text-align:center;padding-top:30px;position:absolute;top:50%;left:50%;margin-top:-80px;margin-left:-80px;" 
                                    v-if="isDataTableShow"
                                    >
                                    <img src="~@/assets/choice_file.png" alt="">
                                    <p>{{tipText}}</p>
                                </div>
                                <div 
                                    style="padding:20px;box-sizing:border-box;height:100%;overflow:auto;" 
                                    v-else
                                    >
                                    <p>数据项：</p>
                                    <a-radio-group v-model="radioValue" @change="dataChange" v-if="radioList.length > 0">
                                        <a-radio :style="radioStyle" :key="index" v-for="(item, index) in radioList" :value="item.code">
                                            {{item.name}}
                                        </a-radio>
                                    </a-radio-group>
                                    <span v-else>暂无数据！</span>
                                </div>
                            </div>
                        </div>
                    </a-modal>

                    <a-form-model-item ref="targIndex" label="指标值" prop="targIndex">
                        <a-input-number 
                            id="inputNumber" 
                            v-model="form.targIndex" 
                            style="width:100%;" 
                            :precision="precision"
                            @change="indexValueOnChange" 
                        />
                    </a-form-model-item>
                    <a-form-model-item ref="remark" label="备注" prop="remark">
                        <a-textarea placeholder="请输入" :rows="4" v-model="form.remark"/>
                    </a-form-model-item>
                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click="onSubmit">
                            确定
                        </a-button>
                        <a-button style="margin-left: 10px;" @click="cancelForm">
                            取消
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-drawer>
        </div>
        <div class="data_source_list">
            <div class="data_source_details">
                <a-table
                    :loading="tableLoading"
                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" 
                    :columns="columns" 
                    :data-source="data"
                    :pagination="false"
                    rowKey="id"
                    bordered
                >
                    <a slot="action" slot-scope="text, record" href="javascript:;">
                        <span style="margin-right:8px;" @click="editDrawer(record)">修改</span>
                        <span @click="showModal(record)">删除</span>
                    </a>
                </a-table>
                <!-- 确认删除对话框 -->
                <a-modal v-model="editVisible" title="确认删除" @ok="handleOk">
                    <p style="text-align:center;">确认删除？</p>
                </a-modal>
                <!-- 底部分页组件 -->
                <BottomPagination
                    :total="total"
                    @pageChange="pageChange"
                    @sizeChange="sizeChange"
                ></BottomPagination>
            </div>
            <!-- 批量删除对话框 -->
            <a-modal
                title="批量删除"
                :visible="batchDeleteVisible"
                :confirm-loading="batchDeleteConfirmLoading"
                @ok="batchDeleteHandleOk"
                @cancel="batchDeleteHandleCancel"
            >
                <p style="text-align:center;">确认删除？</p>
            </a-modal>
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '指标名称',
            dataIndex: 'targName',
            key: 'targName',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '考核数据源',
            dataIndex: 'dsFieldName',
            key: 'dsFieldName',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '指标值',
            dataIndex: 'targIndex',
            key: 'targIndex',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            align: 'center',
            ellipsis: true,
        },
        // {
        //     title: '更新时间',
        //     dataIndex: 'updateTime',
        //     key: 'updateTime',
        //     align: 'center',
        //     ellipsis: true,
        // },
        {
            title: '创建人',
            dataIndex: 'createBy',
            key: 'createBy',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: '140px',
            ellipsis: true,
        },
        {
            title: '修改人',
            dataIndex: 'updateBy',
            key: 'updateBy',
            align: 'center',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '修改时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            align: 'center',
            width: '140px',
            ellipsis: true,
        },
        { 
            title: '操作', 
            dataIndex: '', 
            key: 'x', 
            scopedSlots: { 
                customRender: 'action' 
            },
            align: 'center',
            width: '120px',
        },
    ];

    import TopSelect from './TopSelect'
    import BottomPagination from './BottomPagination'
    import { getIndexList, addIndex, editIndex, deleteIndex, getHeadquarters, getRegion, getCity, getWarehouse, getDataSource, getFieldList,} from '@/api/api'

    export default {
        inject: [ 'reload' ],
        name: "IndexSetting",
        components: {
            TopSelect,
            BottomPagination   
        },
        data () {
            return {
                grade: 1,
                code: '',
                precision: 2,
                nameText: '', // 数据源类型名称/编码
                data: [],
                columns,
                tableLoading: false,
                selectNumber: 0, // 当前选中数据条数
                selectedRowKeys: [], // 当前选择集合
                deletdBtnShow: false, // 批量删除按钮是否显示
                headquartersId: '', // 总部id
                regionId: '', // 大区id
                cityId: '', // 城市id
                organizeId: '', // 仓库id
                regionList: [],
                cityList: [],
                warehouseList: [],
                isRegionShow: true,
                isCityShow: false,
                isWareShow: false,
                isFormRegionShow: false,
                isFormCityShow: false,
                isFormWareShow: false,
                createBy: '', // 创建人
                createTime: [], // 创建时间
                updateBy: '', // 修改人
                updateTime: [], // 修改时间
                createTime_begin: '', // 创建时间开始时间
                createTime_end: '', // 创建时间结束时间
                updateTime_begin: '', // 修改时间开始时间
                updateTime_end: '', // 修改时间结束时间
                dateFormat: 'YYYY-MM-DD HH:mm:ss',
                pageNo: 1,
                pageSize: 10,
                total: 0,
                visible: false,
                placement: 'right',
                drawerTitle: '新增指标',
                labelCol: { span: 7 },  
                wrapperCol: { span: 16 },
                other: '',
                form: {
                    regionList: [],
                    cityList: [],
                    warehouseList: [],
                    region: '',
                    city: '',
                    name: '',
                    copyName: '',
                    regionId: '', // 大区id
                    cityId: '', // 城市id
                    organizeId: '', // 仓库id
                    code: '',
                    targName: '',
                    dsId: '',
                    dsName: '',
                    dsFieldCode: '',
                    dsFieldName: '',
                    targIndex: '',
                    remark: '',
                },
                rules: {
                    targName: [
                        { required: true, message: '请输入指标名称', trigger: 'blur' },
                    ],
                    region: [
                        { required: true, message: '请选择大区', trigger: 'blur' },
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '请选择仓库', trigger: 'blur' },
                    ],
                    dsFieldName: [
                        { required: true, message: '请选择数据源', trigger: 'blur' },
                    ],
                    targIndex: [
                        { required: true, message: '请输入指标值', trigger: 'blur' },
                    ],
                },
                validStatus: true, // 当前表单验证状态，true表示成功，false表示失败
                editVisible: false, // 确认删除对话框
                batchDeleteVisible: false, // 批量删除
                batchDeleteConfirmLoading: false,
                dataVisible: false, // 添加数据源
                isDataTableShow: true, // 添加组件对话框是否选择数据
                btnDisabled: true, // 选择数据源对话框确认按钮是否失效
                searchValue: '',
                dsData: [],
                dsData: [],
                dataReplaceFields: {
                    key: 'dsCode',
                    title: 'categoryName',
                    children: 'dsConfList',
                },
                selectedKeys: [],
                expandedKeys: [],

                tipText: '请从左侧选择表',
                dataValue: 0,
                radioValue: '',
                radioName: '',
                radioList: [],

                radioStyle: {
                    display: 'block',
                    height: '30px',
                    lineHeight: '30px',
                },
                addMode: true,
                disabled: false,
                id: '',
                ids: '',
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm=>{
                // 因为总部、大区、城市指标设置是共用一个页面，所以自己跳自己的时候需要调用reload()刷新页面
                if(from.path === '/headquartersmsg/indexsetting' || from.path === '/regionmsg/indexsetting' || from.path === '/citymsg/indexsetting'){
                    vm.reload()
                }
            })
        },
        created() {
            // 判断当前是总部还是大区、城市
            if(this.$route.path === '/headquartersmsg/indexsetting'){
                this.grade = 1
                this.isRegionShow = true
                this.isCityShow = false
                this.isWareShow = false
            }
            else if(this.$route.path === '/regionmsg/indexsetting'){
                this.grade = 2
                this.isRegionShow = true
                this.isCityShow = true
                this.isWareShow = false
            }else{
                this.grade = 3
                this.isRegionShow = true
                this.isCityShow = true
                this.isWareShow = true
            }
            this.getHeadquartersList()
        },
        methods: {
            // 选择框过滤
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            // 获取总部
            getHeadquartersList(){
                let params = {}
                getHeadquarters(params).then((res)=>{
                    if(res.success){
                        this.headquartersId = res.result.organizeOrgList[0].id
                        this.code = res.result.organizeOrgList[0].code
                        this.getRegionList()
                        this.getFormRegionList()
                    }
                })
            },
            // 获取大区
            getRegionList(){
                let params = {id: this.headquartersId}
                getRegion(params).then((res)=>{
                    if(res.success){
                        this.regionList = res.result.organizeOrgList
                        if(this.regionList.length === 1){
                            this.regionId = res.result.organizeOrgList[0].id
                            this.code = res.result.organizeOrgList[0].code
                            if(this.grade === 1){
                                this.getIndexList()
                            }
                            if(this.grade === 2 || this.grade === 3){
                                this.getCityList()
                            }
                        }
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 选择大区
            regionChange(value){
                this.regionId = value
                for(var item of this.regionList) {
                    if(item.id === this.regionId) {
                        this.code = item.code
                    }
                }
                if(this.grade === 2 || this.grade === 3){
                    this.getCityList()
                }

                this.cityId = ''
                this.organizeId = ''
            },
            // 获取城市
            getCityList(){
                let params = {
                    areaIds: this.regionId
                }
                getCity(params).then((res)=>{
                    if(res.success){
                        this.cityList = res.result.organizeOrgList
                        if(this.cityList.length === 1){
                            this.cityId = res.result.organizeOrgList[0].id
                            this.code = res.result.organizeOrgList[0].code
                            if(this.grade === 2){
                                this.getIndexList()
                            }
                            if(this.grade === 3){
                                this.getWarehouseList()
                            }
                        }
                    }
                })
            },
            // 选择城市
            cityChange(value){
                this.cityId = value
                for(var item of this.cityList) {
                    if(item.id === this.cityId) {
                        this.code = item.code
                    }
                }
                if(this.grade === 3){
                    this.getWarehouseList()
                }
                
                this.organizeId = ''
            },
            // 获取仓库
            getWarehouseList(){
                let params = {
                    cityIds: this.cityId
                }
                getWarehouse(params).then((res)=>{
                    if(res.success){
                        this.warehouseList = res.result.organizeOrgList
                        if(this.warehouseList.length === 1){
                            this.organizeId = res.result.organizeOrgList[0].id
                            this.code = res.result.organizeOrgList[0].code
                            if(this.grade === 3){
                                this.getIndexList()
                            }
                        }
                    }
                })
            },
            // 选择仓库
            warehouseChange(value){
                this.organizeId = value
                for(var item of this.warehouseList) {
                    if(item.id === this.organizeId) {
                        this.code = item.code
                    }
                }
            },

            // 获取指标
            getIndexList() {
                let params = {
                    grade: this.grade,
                    code: this.code,
                    regionId: this.regionId,
                    cityId: this.cityId,
                    organizeId: this.organizeId,
                    createBy: this.createBy,
                    updateBy: this.updateBy,
                    createTime_begin: this.createTime_begin,
                    createTime_end: this.createTime_end,
                    updateTime_begin: this.updateTime_begin,
                    updateTime_end: this.updateTime_end,
                    pageSize: this.pageSize,
                    pageNo: this.pageNo,
                    delFlag: 0,
                }
                this.tableLoading = true
                getIndexList(params).then((res)=>{
                    this.tableLoading = false
                    if(res.success){
                        if(res.result && res.result.records){
                            this.data = res.result.records
                            this.total = res.result.total
                        }
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 搜索
            onSearch(){
                // 搜索条件必填控制
                if(this.grade === 1){
                    if( this.regionId === '' ){
                        this.$message.warning('搜索时必须先选择大区！')
                    }else{
                        this.getIndexList()
                    }
                }else if(this.grade === 2){
                    if( this.regionId === '' || this.cityId === '' ){
                        this.$message.warning('搜索时必须先选择大区和城市！')
                    }else{
                        this.getIndexList()
                    }
                }else{
                    if( this.regionId === '' || this.cityId === '' || this.organizeId === '' ){
                        this.$message.warning('搜索时必须先选择大区、城市和仓库！')
                    }else{
                        this.getIndexList()
                    }
                }
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 重置
            onReset() {
                this.regionId = ''
                this.cityId = ''
                this.organizeId = ''
                this.createBy = ''
                this.createTime = []
                this.updateBy = ''
                this.updateTime = []
                this.createTime_begin = ''
                this.createTime_end = ''
                this.updateTime_begin = ''
                this.updateTime_end = ''
                this.pageSize = 10
                this.pageNo = 1
                this.total = 0
                this.data = []
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            // 选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
                this.selectNumber = selectedRowKeys.length
                if(this.selectedRowKeys.length > 0){
                    this.deletdBtnShow = true
                }else{
                    this.deletdBtnShow = false
                }
            },
            // 清空选中
            clearSelect() {
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 获取当前总部id
            getHeadId(data) {
                this.headquartersId = data
            },
            // 获取当前大区id
            getRegionId(data) {
                this.regionId = data
            },
            // 获取当前城市id
            getCityId(data) {
                this.cityId = data
            },
            // 获取当前仓库id
            getWareId(data) {
                this.organizeId = data
            },
            // 获取当前页数、条数
            pageChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getIndexList()
            },
            // 获取当前页数、条数
            sizeChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getIndexList()
            },
            // 创建时间
            createChange(value, dateString) {
                this.createTime = value
                this.createTime_begin = dateString[0]
                this.createTime_end = dateString[1]
            },
            createOk(value) {
                console.log('onOk: ', value);
            },
            // 修改时间
            editChange(value, dateString) {
                this.updateTime = value
                this.updateTime_begin = dateString[0]
                this.updateTime_end = dateString[1]
            },
            editOk(value) {
                console.log('onOk: ', value);
            },
            // 新增收支项
            showDrawer() {
                if(this.grade === 1){
                    this.isFormRegionShow = true
                    this.isFormCityShow = false
                    this.isFormWareShow = false
                }else if(this.grade === 2){
                    this.isFormRegionShow = true
                    this.isFormCityShow = true
                    this.isFormWareShow = false
                }else{
                    this.isFormRegionShow = true
                    this.isFormCityShow = true
                    this.isFormWareShow = true
                }

                this.visible = true;
                this.drawerTitle = '新增指标'
                this.addMode = true
                this.disabled = false
                this.form.region = ''
                this.form.city = ''
                this.form.name = ''
                this.form.code = ''
                this.form.targName = ''
                this.form.dsId = ''
                this.form.dsName = ''
                this.form.dsFieldCode = ''
                this.form.dsFieldName = ''
                this.form.targIndex = ''
                this.form.remark = ''

                // 只有验证失败，新增的时候才重置验证状态
                if(this.validStatus === false) {
                    this.$refs.ruleForm.resetFields()
                }
                this.isDataTableShow = true
                this.radioList = []
                this.radioValue = ''
                this.categoryIdList2 = []
            },
            onClose() {
                this.visible = false;
            },
            // 修改收支项
            editDrawer(record) {
                if(this.grade === 1){
                    this.isFormRegionShow = true
                    this.isFormCityShow = false
                    this.isFormWareShow = false
                    this.form.region = record.name
                }else if(this.grade === 2){
                    this.isFormRegionShow = false
                    this.isFormCityShow = true
                    this.isFormWareShow = false
                    this.form.city = record.name
                }else{
                    this.isFormRegionShow = false
                    this.isFormCityShow = false
                    this.isFormWareShow = true
                    this.form.name = record.name
                }

                this.visible = true;
                this.drawerTitle = '修改指标'
                this.addMode = false
                this.disabled = true
                this.form.code = record.code
                this.form.targName = record.targName
                this.form.dsId = record.dsId
                this.form.dsName = record.dsName
                this.form.dsFieldCode = record.dsFieldCode
                this.form.dsFieldName = record.dsFieldName
                this.form.targIndex = record.targIndex
                this.form.remark = record.remark
                this.id = record.id
            },
            // 表单
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.validStatus = true
                        if(this.addMode){
                            let params = {
                                grade: this.grade,
                                code: this.form.code,
                                name: this.form.copyName,
                                regionId: this.form.regionId,
                                cityId: this.form.cityId,
                                organizeId: this.form.organizeId,
                                targName: this.form.targName,
                                dsId: this.form.dsId,
                                dsName: this.form.dsName,
                                dsFieldCode: this.form.dsFieldCode,
                                dsFieldName: this.form.dsFieldName,
                                targIndex: this.form.targIndex,
                                remark: this.form.remark,
                            }
                            addIndex(params).then((res)=>{
                                if(res.success){
                                    if(this.regionId !== ''){
                                        this.getIndexList()
                                        this.visible = false
                                    }
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }else{
                            let params = {
                                id: this.id,
                                grade: this.grade,
                                code: this.form.code,
                                targName: this.form.targName,
                                dsId: this.form.dsId,
                                dsName: this.form.dsName,
                                dsFieldCode: this.form.dsFieldCode,
                                dsFieldName: this.form.dsFieldName,
                                targIndex: this.form.targIndex,
                                remark: this.form.remark,
                            }
                            editIndex(params).then((res)=>{
                                if(res.success){
                                    this.getIndexList()
                                    this.visible = false
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }
                    } else {
                        this.validStatus = false
                    return false;
                    }
                });
                },
            cancelForm() {
                this.visible = false
            },
            // 确认删除对话框
            showModal(record) {
                this.editVisible = true
                this.ids = record.id
            },
            handleOk(e) {
                let params = {
                    ids: this.ids,
                }
                deleteIndex(params).then((res)=>{
                    if(res.success){
                        this.getIndexList()
                        this.editVisible = false
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            // 批量删除
            batchDelete() {
                this.batchDeleteVisible = true
                this.ids = this.selectedRowKeys.join(',')
            },
            batchDeleteHandleOk(e) {
                this.batchDeleteConfirmLoading = true;
                let params = {
                    ids: this.ids,
                }
                deleteIndex(params).then((res)=>{
                    if(res.success){
                        this.batchDeleteVisible = false
                        this.batchDeleteConfirmLoading = false
                        this.selectNumber = 0
                        this.selectedRowKeys = []
                        this.deletdBtnShow = false
                        this.getIndexList()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            batchDeleteHandleCancel(e) {
                this.batchDeleteVisible = false;
            },
            // 选择数据源
            choiceData() {
                this.dataVisible = true
                let params = {
                    
                }
                getDataSource(params).then((res)=>{
                    if(res.success){
                        this.dsData = res.result
                        // 给子级添加isLeaf属性，让子级显示为文件
                        for(var item of this.dsData){
                            for(var childItem of item.dsConfList){
                                childItem.isLeaf = true
                            }
                        }
                    }else{
                        this.$message.warning(res.message)
                    }
                })

                this.selectedKeys = []
                this.expandedKeys = []
                this.searchValue = ''
            },
            dataHandleOk(e) {
                this.dataVisible = false;
            },
            
            // 搜索业务包和表
            businessSearch(value) {
                const rebuildData = (value, arr) => {
                    if (!arr) {
                        return []
                    }
                    let newarr = [];
                    arr.forEach(element => {
                        if (element.categoryName.indexOf(value) > -1) {
                            const ab = rebuildData(value, element.dsConfList);
                            const obj = {
                                ...element,
                                children: ab
                            }
                            newarr.push(obj);
                        } else {
                        if (element.dsConfList && element.dsConfList.length > 0) {
                            const ab = rebuildData(value, element.dsConfList);
                            const obj = {
                                ...element,
                                dsConfList: ab
                            };
                            if (ab && ab.length > 0) {
                                newarr.push(obj);
                            }
                        }
                        }
                    });
                    return newarr;
                };

                this.dsData = rebuildData(value, this.dsData)
            },
            businessChange() {
                if(this.searchValue === ''){
                    let params = {
                        name: '',
                    }
                    getDataSource(params).then((res)=>{
                        if(res.success){
                            this.dsData = res.result
                            // 给子级添加isLeaf属性，让子级显示为文件
                            for(var item of this.dsData){
                                for(var childItem of item.dsConfList){
                                    childItem.isLeaf = true
                                }
                            }
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }
            },

            // 树形控件选择
            onSelect(keys, info) {

                if(info.selectedNodes[0]._props.isLeaf){
                    this.selectedKeys = keys
                    this.form.dsId = this.getTreeId(this.dsData, keys[0])
                    this.form.dsName = info.selectedNodes[0].title

                    let params = {
                        dsCode: keys[0],
                    }
                    getFieldList(params).then((res)=>{
                        if(res.success){
                            this.radioList = res.result.filter(v => v.code !== 'id' & v.viewType === 'numeric')
                            this.isDataTableShow = false
                        }else{
                            this.$message.warning(res.message)
                            this.isDataTableShow = true
                            this.tipText = '当前表格暂无数据！'
                        }
                    })
                }
            },
            // 通过code去遍历获取层级id
            getTreeId(list, code){
            let _this=this
                for (let i = 0; i < list.length; i++) {
                let a=list[i]
                if(a.dsCode===code){
                    return a.id
                }else{
                    if(a.dsConfList && a.dsConfList.length>0){
                    let res=_this.getTreeId(a.dsConfList, code)
                    if(res){
                        return res
                    }
                    }
                }
                }
            },

            onExpand(value) {
                this.expandedKeys = value
            },
            // 选择数据项单选
            dataChange(e) {
                this.form.dsFieldCode = e.target.value
                if(this.form.dsFieldCode){
                    this.btnDisabled = false
                }else{
                    this.btnDisabled = true
                }
                for(var item of this.radioList){
                    if(item.code === this.radioValue){
                        this.form.dsFieldName = item.name
                    }
                }
            },
            // 指标值输入框
            indexValueOnChange(value) {
                this.form.targIndex = value
            },

            // 表单获取大区
            getFormRegionList(){
                let params = {id: this.headquartersId}
                getRegion(params).then((res)=>{
                    if(res.success){
                        this.form.regionList = res.result.organizeOrgList
                    }
                })
            },
            // 表单选择大区
            regionFormChange(value){
                this.form.regionId = value
                for(var item of this.form.regionList) {
                    if(item.id === this.form.regionId) {
                        this.form.code = item.code
                        this.form.region = item.name
                        this.form.copyName = item.name
                    }
                }
                this.getFormCityList()
                this.form.cityId = ''
                this.form.city = ''
                this.form.organizeId = ''
                this.form.name = ''
            },
            // 表单获取城市
            getFormCityList(){
                let params = {
                    areaIds: this.form.regionId
                }
                getCity(params).then((res)=>{
                    if(res.success){
                        this.form.cityList = res.result.organizeOrgList
                    }
                })
            },
            // 表单选择城市
            cityFormChange(value){
                this.form.cityId = value
                for(var item of this.form.cityList) {
                    if(item.id === this.form.cityId) {
                        this.form.code = item.code
                        this.form.city = item.name
                        this.form.copyName = item.name
                    }
                }
                this.getFormWarehouseList()
                this.form.organizeId = ''
                this.form.name = ''
            },
            // 表单获取仓库
            getFormWarehouseList(){
                let params = {
                    cityIds: this.form.cityId
                }
                getWarehouse(params).then((res)=>{
                    if(res.success){
                        this.form.warehouseList = res.result.organizeOrgList
                    }
                })
            },
            // 表单选择仓库
            warehouseFormChange(value){
                this.form.organizeId = value
                for(var item of this.form.warehouseList) {
                    if(item.id === this.form.organizeId) {
                        this.form.code = item.code
                        this.form.name = item.name
                        this.form.copyName = item.name
                    }
                }
            },
        },
        
    }
</script>

<style lang="less" scoped>
    .indexSetting{
        width: 100%;
        padding: 0 10px 10px 10px;
        font-style: Microsoft YaHei;
        background: #ffffff;
        box-sizing: border-box;
        .top_operation{
            margin-bottom: 10px;
            overflow: hidden;
            .every_operation{
                float: left;
                margin-top: 10px;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
            .button_div{
                float: left;
                margin-top: 10px;
            }
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .add_btn{
            margin-bottom: 10px;
        }
        .data_source_list{
            h3{
                font-weight: bold;
            }
            .data_pagination{
                width: 100%;
                height: 32px;
                margin: 20px 0 10px 0;
            }
        }
    }
</style>